<script setup>
import { nextTick, ref } from 'vue'
import { Events, Window } from "@wailsio/runtime";
import 'vue-cropper/dist/index.css'
import { VueCropper } from "vue-cropper";
import { OpenNewTopWindow } from '../../bindings/changeme/goservice'
const imgageBase64 = ref()
const cropper = ref()
Events.On('screenShotEvent', (event) => {
  console.log(event)
  imgageBase64.value = 'data:image/png;base64,' + event.data[0]
});

function confirm() {
  Window.Hide()
}

function fixedCut() {
  const width = cropper.value.cropW
  const height = cropper.value.cropH
  cropper.value.getCropData((data) => {
    // do something
    OpenNewTopWindow(data, width, height, new Date().getTime().toString())
    Window.Hide()
  })
}

function startCrop() {
  cropper.value.startCrop()
}
</script>

<template>
  <main>
    <div style="width: 100vw;height: 100vh;position: relative;">
      <VueCropper ref="cropper" v-if="imgageBase64" :img="imgageBase64" :canMove="false" mode="100% auto"
        maxImgSize="max" centerBox :canScale="false" autoCrop :autoCropWidth="200"
        :autoCropHeight="200" @img-load="startCrop">
      </VueCropper>
      <div class="tool-bar" v-if="imgageBase64">
        <button @click="fixedCut">固定</button>
        <button @click="confirm">确定</button>
      </div>
    </div>
  </main>
</template>

<style scoped>
.tool-bar {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 20px;
}
</style>
